<template>
  <div class="pro chart">
    <div class="head">
      <p class="line-title">
        <i
          class="iconfont"
          style="color: #95DE64; background: rgba(149, 222, 100, 0.15)"
          >&#xe688;</i
        >
        <span>{{ $t("console.orderranking.title") }}</span>
      </p>
      <el-radio-group
        size="small"
        class="select_date"
        v-model="vdate"
        @change="OrderRankingData($event)"
      >
        <el-radio-button label="今日"></el-radio-button>
        <el-radio-button label="昨天"></el-radio-button>
        <el-radio-button label="本周"></el-radio-button>
        <el-radio-button label="本月"></el-radio-button>
      </el-radio-group>
    </div>
    <div class="table-box">
      <k-table
        ref="tables"
        :data="tableData"
        :showPage="false"
        height="100%"
        :hideScrollBar="true"
        headBg=""
        v-loading="loading"
      >
        <el-table-column prop="guestname" label="客户名称" width="230" />
        <el-table-column label="销售占比">
          <template slot-scope="scope">
            <el-progress :percentage="scope.row.pro" :color="scope.row.color" />
          </template>
        </el-table-column>
        <el-table-column prop="jine" label="日销售额" />
        <el-table-column prop="dd_num" label="下单数" />
      </k-table>
    </div>
  </div>
</template>
<script>
import { OrderRankingApi } from "@/api/ConsoleApi";
export default {
  data() {
    return {
      tableData: [],
      timer: "",
      vdate: "今日",
      loading: true
    };
  },
  mounted() {
    this.OrderRankingData("今日");
    this.timer = setInterval(() => {
      this.OrderRankingData(this.vdate);
    }, 60000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    OrderRankingData(val) {
      let userdata = JSON.stringify(this.$store.state.user.user.info);
      userdata = JSON.parse(userdata);
      let guestcode = userdata.reguserno;
      let gscode = userdata.gscode;
      this.vdate = val;
      this.loading = true;
      OrderRankingApi({
        guestcode: guestcode,
        gscode: gscode,
        rankname: val
      }).then(res => {
        this.loading = false;
        if (res.code == "0") {
          res.data.data.forEach(element => {
            if (element.jine >= 10000) {
              element.jine =
                (Math.round(element.jine * 10000) / 10000 / 10000).toFixed(2) +
                "w";
            } else {
              element.jine = parseFloat(element.jine).toFixed(2);
            }
            element.percentage = parseInt(element.percentage);
          });
          this.tableData = res.data.data;
          let { tableData } = this;
          setTimeout(() => {
            for (let i = 0; i < tableData.length; i++) {
              let item = tableData[i];
              this.$set(this.tableData[i], "pro", item.percentage);
            }
          }, 1);
        } else {
          this.tableData = [];
        }
      });
    },
    formatter(row, column) {
      return parseFloat(row.jine).toFixed(2);
    }
  }
};
</script>

<style lang="scss">
// 进度动画
.el-progress-bar__inner {
  transition: all 1s !important;
}
</style>

<style lang="scss" scoped>
.pro {
  flex: 1;
  padding-bottom: 30px;

  .table-box {
    padding: 0 8px;
    height: calc(100% - 30px);
  }
}
.select_date {
  padding-right: 5px;
}
::v-deep .el-table .cell {
  font-size: 13px;
}

@media only screen and (max-width: $device-ipad) {
  .pro {
    width: 100% !important;
    margin-top: 15px;
    padding-bottom: 30px;
  }
}
</style>
